<template>
  <view style="width: 750rpx; z-index: 99">
    <view
      class="uni-navbar"
      :class="{ 'uni-dark': dark, 'uni-nvue-fixed': fixed }"
      style="z-index: 100"
    >
      <view
        class="uni-navbar__content"
        :class="{
          'uni-navbar--fixed': fixed,
          'uni-navbar--shadow': shadow,
          'uni-navbar--border': border,
          'uni-navbar-shadow': shadow,
        }"
        :style="{ 'background-color': themeBgColor, 'border-bottom-color': themeColor }"
      >
        <status-bar v-if="statusBar" />

        <view
          class="uni-navbar__header"
          :style="{
            color: themeColor,
            backgroundColor: themeBgColor,
            height: navbarHeight,
            transition: 'background-color 0.5s ease',
          }"
        >
          <view
            @tap="onClickLeft"
            class="uni-navbar__header-btns uni-navbar__header-btns-left"
            :style="{ width: leftIconWidth }"
          >
            <slot name="left">
              <view class="uni-navbar__content_view" v-if="leftIcon.length > 0">
                <uni-icons
                  style="transition: color 0.5s ease"
                  :color="themeColor"
                  :type="leftIcon"
                  size="24"
                />
              </view>
              <view
                :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length > 0 }"
                class="uni-navbar-btn-text"
                v-if="leftText.length"
              >
                <text
                  :style="{
                    color: themeColor,
                    fontSize: leftTextSize,
                    transition: 'color 0.5s ease',
                  }"
                  >{{ leftText }}</text
                >
              </view>
            </slot>
          </view>

          <view class="uni-navbar__header-container" @tap="onClickTitle">
            <slot>
              <view class="uni-navbar__header-container-inner" v-if="title.length > 0">
                <text class="uni-nav-bar-text" :style="{ color: themeColor }">
                  {{ title }}
                </text>
                <view v-if="isOnline == 1" class="isonline">
                  {{ '在线' }}
                </view>
              </view>
            </slot>
          </view>

          <view
            @click="onClickRight"
            class="uni-navbar__header-btns uni-navbar__header-btns-right"
            v-if="isShowRight"
            :style="{ width: rightIconWidth }"
          >
            <slot name="right">
              <view v-if="rightIcon.length">
                <uni-icons
                  style="transition: color 0.5s ease"
                  :color="themeColor"
                  :type="rightIcon"
                  size="24"
                />
              </view>
              <view class="uni-navbar-btn-text" v-if="rightText.length && !rightIcon.length">
                <text class="uni-nav-bar-right-text" :style="{ color: themeColor }">{{
                  rightText
                }}</text>
              </view>
            </slot>
          </view>
        </view>
      </view>
    </view>
    <view v-if="fixed" :style="{ height: navbarHeight }"></view>
    <status-bar v-if="fixed" />
  </view>
</template>

<script>
import statusBar from './uni-status-bar.vue'
const getVal = (val) => (typeof val === 'number' ? val + 'px' : val)

/**
 *
 *
 * NavBar 自定义导航栏
 * @description 导航栏组件，主要用于头部导航
 * @property {Boolean} dark 开启黑暗模式
 * @property {Boolean} isOnline 是否在线
 * @property {String} title 标题文字
 * @property {String} leftText 左侧按钮文本
 * @property {String} rightText 右侧按钮文本
 * @property {String} leftIcon 左侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
 * @property {String} rightIcon 右侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
 * @property {String} color 图标和文字颜色
 * @property {String} backgroundColor 导航栏背景颜色
 * @property {Boolean} fixed = [true|false] 是否固定顶部
 * @property {Boolean} statusBar = [true|false] 是否包含状态栏
 * @property {Boolean} shadow = [true|false] 导航栏下是否有阴影
 * @property {Boolean} stat 是否开启统计标题上报
 * @property {String} isShowRight 是否显示右侧区域
 * @event {Function} clickLeft 左侧按钮点击时触发
 * @event {Function} clickRight 右侧按钮点击时触发
 * @event {Function} clickTitle 中间标题点击时触发
 *
 * @example <h-nav-bar title="积分" backgroundColor="transparent"></h-nav-bar>
 */
export default {
  name: 'HNavBar',
  components: {
    statusBar,
  },
  emits: ['clickLeft', 'clickRight', 'clickTitle'],
  props: {
    addHeight: {
      type: [Number, String],
      default: 0,
    },
    leftTextSize: {
      type: [String, Number],
      default: '16px',
    },
    isShowRight: {
      type: Boolean,
      default: true,
    },
    isOnline: {
      type: Number,
      default: null,
    },
    dark: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    leftText: {
      type: String,
      default: '',
    },
    rightText: {
      type: String,
      default: '',
    },
    leftIcon: {
      type: String,
      default: 'back',
    },
    rightIcon: {
      type: String,
      default: '',
    },
    fixed: {
      type: [Boolean, String],
      default: false,
    },
    color: {
      type: String,
      default: '',
    },
    backgroundColor: {
      type: String,
      default: '#fff',
    },
    shadow: {
      type: [Boolean, String],
      default: false,
    },
    statusBar: {
      type: [Boolean, String],
      default: true,
    },
    shadow: {
      type: [Boolean, String],
      default: false,
    },
    border: {
      type: [Boolean, String],
      default: false,
    },
    height: {
      type: [Number, String],
      default: 44,
    },
    leftWidth: {
      type: [Number, String],
      default: 60,
    },
    rightWidth: {
      type: [Number, String],
      default: 60,
    },
    stat: {
      type: [Boolean, String],
      default: '',
    },
  },
  computed: {
    themeBgColor() {
      if (this.dark) {
        // 默认值
        if (this.backgroundColor) {
          return this.backgroundColor
        } else {
          return this.dark ? '#333' : '#FFF'
        }
      }
      return this.backgroundColor || '#FFF'
    },
    themeColor() {
      if (this.dark) {
        // 默认值
        if (this.color) {
          return this.color
        } else {
          return this.dark ? '' : ''
        }
      }
      return this.color || '#333'
    },
    navbarHeight() {
      return getVal(this.height + this.addHeight)
    },
    leftIconWidth() {
      return getVal(this.leftWidth)
    },
    rightIconWidth() {
      return getVal(this.rightWidth)
    },
  },
  mounted() {
    if (uni.report && this.stat && this.title !== '') {
      uni.report('title', this.title)
    }
  },
  methods: {
    onClickLeft() {
      this.$emit('clickLeft')
      uni.navigateBack({
        delta: 1,
        success: function () {},
        fail: function (err) {
          uni.switchTab({
            url: '/pages/index/index',
          })
        },
      })
    },
    onClickRight() {
      this.$emit('clickRight')
    },
    onClickTitle() {
      this.$emit('clickTitle')
    },
  },
}
</script>

<style lang="scss" scoped>
$nav-height: 44px;

.uni-nvue-fixed {
  position: static;
  top: 0;
  left: 0;
}

.uni-nav-bar-text {
  overflow: hidden;
  transition: color 0.5s ease;
  // #ifdef APP-PLUS || APP-IOS || APP-ANDROID
  font-size: 36rpx;
  font-weight: 400;
  color: #000000;
  /* #endif */
  // #ifdef APP-PLUS || APP-IOS || APP-ANDROID
  font-size: 18px;
  /* #endif */
}

.uni-nav-bar-right-text {
  font-size: 16px;
  transition: color 0.5s ease;
}

.uni-navbar__content {
  position: relative;
  // box-sizing: border-box;
  background-color: transparent;
  transition: background-color 0.5s ease;
}

.uni-navbar-btn-text {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  line-height: 12px;
}

.uni-navbar__header {
  transition: color 0.5s ease;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  padding: 0 10px 0 5px;
  flex-direction: row;
  height: $nav-height;
  font-size: 16px;
}

.uni-navbar__header-btns {
  /* #ifndef APP-NVUE */
  overflow: hidden;
  display: flex;
  /* #endif */
  flex-wrap: nowrap;
  flex-direction: row;
  width: 120rpx;
  justify-content: center;
  align-items: center;
  /* #ifdef H5 */
  cursor: pointer;
  /* #endif */
}

.uni-navbar__header-btns-left {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  width: 120rpx;
  justify-content: flex-start;
  align-items: center;
}

.uni-navbar__header-btns-right {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 26rpx;
  color: #666666;
}

.uni-navbar__header-container {
  display: flex;
  justify-content: center;
  flex: 1;
  padding: 0 10px;
  overflow: hidden;
}

.uni-navbar__header-container-inner {
  // position: relative;
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  overflow: hidden;
  .isonline {
    position: relative;
    // z-index: 1000;
    // left: 50%;
    // top: 50%;
    // transform: translate(50%, -50%);
    margin-left: 29rpx;
    width: 70rpx;
    height: 28rpx;
    border-radius: 13rpx 13rpx 13rpx 13rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #56b21c;
    text-align: center;
    &::before {
      content: '';
      position: absolute;
      left: -14rpx;
      top: 10rpx;
      width: 14rpx;
      height: 14rpx;
      border-radius: 50%;
      background: #8bca64;
    }
  }
}

.uni-navbar__placeholder-view {
  height: $nav-height;
}

.uni-navbar--fixed {
  position: fixed;
  z-index: 998;
  /* #ifdef H5 */
  left: var(--window-left);
  right: var(--window-right);
  /* #endif */
  /* #ifndef H5 */
  left: 0;
  right: 0;
  /* #endif */
}

.uni-navbar--shadow {
  box-shadow: 0 1px 6px #ccc;
}

.uni-navbar--border {
  border-bottom-width: 1rpx;
  border-bottom-style: solid;
  border-bottom-color: #eee;
}

.uni-navbar-shadow {
  box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(220, 220, 220, 0.5);
}

// 暗主题配置
.uni-dark {
}
</style>
